<template>
	<div class="pointLimit">
		<el-form :inline="true" :model="form" ref="form" label-width="120px">
			<el-row>
				<el-form-item label="线路">
					<span>{{$parent.$parent.$parent.line.srcCity}}</span>
					<span>-</span>
					<span>{{$parent.$parent.$parent.line.dstCity}}</span>
				</el-form-item>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item class='marginB0' label="定点选择（可多选）：" label-width="180px"></el-form-item>
				</el-col>
				<el-col>
					<el-form-item class='marginB0' prop="srcCityCheckList" :label="$parent.$parent.$parent.line.srcCity">
						<el-checkbox-group v-model="form.srcCityCheckList">
							<el-checkbox v-for="(item, $index) in srcCityList" :key="$index" :label="item.spotName"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item prop="dstCityCheckList" :label="$parent.$parent.$parent.line.dstCity">
						<el-checkbox-group v-model="form.dstCityCheckList">
							<el-checkbox v-for="(item, $index) in dstCityList" :key="$index" :label="item.spotName"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-form-item label="限制类型" prop="timeLimit">
					<el-switch v-model="form.timeLimit" on-text="" off-text=""></el-switch>
					<span>按时间限制</span>
				</el-form-item>
				<el-button v-show='!form.timeLimit' type="primary" icon="plus" @click="addRule('form')">添加</el-button>
				<el-button type="danger" icon="setting" v-show='!form.timeLimit' @click="resetForm('form')">重置</el-button>
			</el-row>
			<el-row v-show='form.timeLimit'>
				<el-form-item label="开始时间" prop="start">
					<el-date-picker v-model="form.start" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" prop="end">
					<el-date-picker v-model="form.end" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<el-button type="primary" icon="plus" @click="addRule('form')">添加</el-button>
				<el-button type="danger" icon="setting" @click="resetForm('form')">重置</el-button>
			</el-row>
		</el-form>
		<el-table :data="PLTableData" border fit style="width: 100%">
			<el-table-column align='center' prop="name" label="定点名称"></el-table-column>
			<el-table-column align='center' prop="cityName" label="所属城市"></el-table-column>
			<el-table-column align='center' label="限制类型">
				<template scope="props">
					<span>{{props.row.ruleType == "TIME" ? "时间限制" : ""}}</span>
				</template>
			</el-table-column>
			<el-table-column align='center' prop="" label="开始时间">
				<template scope="props">
					<span>{{dateFormat(props.row.startTime,'yyyy-MM-dd hh:mm')}}</span>
				</template>
			</el-table-column>
			<el-table-column align='center' prop="" label="结束时间">
				<template scope="props">
					<span>{{dateFormat(props.row.endTime,'yyyy-MM-dd hh:mm')}}</span>
				</template>
			</el-table-column>
			<el-table-column align='center' label="操作">
				<template scope="scope">
					<el-button @click="del(scope.$index, scope.row)" size='small' icon="delete" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class='pagination' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
	</div>
</template>
<script>
	export default {
		name: 'pointLimit',
		data() {
			return {
				lineId: '',
				total: 0,
				pageSize: 10,
				pageNum: 1,
				srcCityList: [],
				dstCityList: [],
				form: {
					srcCityCheckList: [],
					dstCityCheckList: [],
					timeLimit: false,
					start: '',
					end: '',
				},
				PLTableData: [{
					name: '',
					cityId: '',
					ruleType: '',
					startTime: '',
					endTime: ''
				}],
			}
		},
		methods: {
			getFixedspotList() {
				var that = this;
				this.lineId = window.location.href.split('=')[1];
				this.$http.get('/lineLimitList.shtml', {
						params: {
							lineId: that.lineId,
							pageSize: that.pageSize,
							pageNum: that.pageNum
						}
					})
					.then(function(data) {
						if(data.code == 200) {
							that.PLTableData = data.data;
							that.total = data.appendix;
						}
					});
			},
			useCityUsePoint() {
				var srcCityId = this.$parent.$parent.$parent.line.srcCityId;
				var dstCityId = this.$parent.$parent.$parent.line.dstCityId;
				this.getCityUsePoint(srcCityId, 1);
				this.getCityUsePoint(dstCityId, 2);
			},
			getCityUsePoint(id, val) {
				var that = this;
				this.$http.get('/getCityUsePointList.shtml', {
						params: {
							cityId: id
						}
					})
					.then(function(data) {
						if(data.code == 200) {
							if(val == "1") {
								that.srcCityList = data.data;
							} else {
								that.dstCityList = data.data;
							}
						}
					});
			},
			addRule(formName) {
				var that = this;
				if(this.form.srcCityCheckList.length == 0 && this.form.dstCityCheckList.length == 0) {
					this.$notify({
						type: 'error',
						title: '提示',
						message: '请选择城市定点！'
					});
				} else if(this.srcCityList.length == 0 && this.dstCityList.length == 0) {
					this.$notify({
						type: 'error',
						title: '提示',
						message: '相关城市下没有定点，不能添加！'
					});
				} else if(this.form.timeLimit && !this.form.start) {
					this.$notify({
						type: 'error',
						title: '提示',
						message: '请选择开始时间！'
					});
				} else if(this.form.timeLimit && !this.form.end) {
					this.$notify({
						type: 'error',
						title: '提示',
						message: '请选择结束时间！'
					});
				} else if(new Date(this.form.start).getTime() > new Date(this.form.end).getTime()) {
					this.$notify({
						type: 'error',
						title: '提示',
						message: '结束时间必须大于开始时间！'
					});
				} else if(!this.form.timeLimit && this.PLTableData[0].ruleType == "TIME") {
					this.$confirm('确认将该线路时间限制修改为线路限制？', '确认修改线路限制?', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.add(formName);
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else {
					this.add(formName);
				}
			},
			add(formName) {
				var that = this;
				var params = {};
				params.lineId = this.lineId;
				if(this.form.timeLimit) {
					params.ruleType = 'TIME';
					params.start = new Date(this.form.start).getTime();
					params.end = new Date(this.form.end).getTime();
				} else {
					params.ruleType = 'LINE';
					params.start = '0';
					params.end = '0';
				}

				params.spots = [];
				var dstCityCheckList = this.form.dstCityCheckList;
				for(var i = 0; i < dstCityCheckList.length; i++) {
					var dstCity = dstCityCheckList[i];
					for(var n = 0; n < this.dstCityList.length; n++) {
						if(this.dstCityList[n].spotName == dstCity) {
							dstCity = this.dstCityList[n];
							params.spots.push({
								name: dstCity.spotName,
								id: dstCity.cityId,
								lat: dstCity.latitude,
								lon: dstCity.longtitude
							})
						}
					}
				};
				var srcCityCheckList = this.form.srcCityCheckList;
				for(var i = 0; i < srcCityCheckList.length; i++) {
					var srcCity = srcCityCheckList[i];
					for(var n = 0; n < this.srcCityList.length; n++) {
						if(this.srcCityList[n].spotName == srcCity) {
							srcCity = this.srcCityList[n];
							params.spots.push({
								name: srcCity.spotName,
								id: srcCity.cityId,
								lat: srcCity.latitude,
								lon: srcCity.longtitude
							})
						}
					}
				};
				this.$http.post("/addPointLimit.shtml",
					"param=" + JSON.stringify(params)
				).then(function(data) {
					console.log(data);
					if(data.code == 200) {
						that.getFixedspotList();
						that.$refs[formName].resetFields();
						that.$notify({
							title: '成功',
							message: '添加成功',
							type: 'success'
						});
					}
				});
			},
			del(index, row) {
				var that = this;
				this.$confirm('确认删除该定点线路限制?', '删除定点线路限制', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var id = {
						id: row.id
					};
					this.$http.post("/deletePointLimit.shtml",
						"param=" + JSON.stringify(id)
					).then(function(data) {
						if(data.code == 200) {
							that.getFixedspotList();
							that.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			dateFormat: function(time, fmt) {
				if(!time) {
					return "";
				}
				var d = new Date(time);
				var o = {
					"M+": d.getMonth() + 1, //月份   
					"d+": d.getDate(), //日   
					"h+": d.getHours(), //小时   
					"m+": d.getMinutes(), //分   
					"s+": d.getSeconds(), //秒   
					"q+": Math.floor((d.getMonth() + 3) / 3), //季度   
					"S": d.getMilliseconds() //毫秒   
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getFixedspotList();
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getFixedspotList();
			}
		},
		created() {
			var that = this;
			if(sessionStorage.getItem("tabIdx") == "pointLimit") {
				this.$http.post('/cityList.shtml', "value=" + JSON.stringify({
						name: "all"
					}))
					.then(function(data) {
						that.getFixedspotList();
					});
			}
		},
		watch: {
			"$parent.$parent.$parent.lineDetail": function(name) {
				if(name == "pointLimit") {
					var that = this;
					this.$http.post('/cityList.shtml', "value=" + JSON.stringify({
							name: "all"
						}))
						.then(function(data) {
							that.getFixedspotList();
							that.useCityUsePoint();
						});
				}
			},
			"$parent.$parent.$parent.line": function(name) {
				if(this.$parent.$parent.$parent.lineDetail == "pointLimit") {
					this.useCityUsePoint();
				}
			}
		}
	}
</script>
<style>
	.pointLimit .marginB0 {
		margin-bottom: 0px;
	}
	
	.pointLimit .btnStyle {
		width: 550px;
		text-align: center;
		margin-bottom: 15px;
	}
	
	.pointLimit .pagination {
		padding: 30px 0 0 40px !important;
	}
</style>